import React from 'react';
import {Button,message,Row,Col,Upload} from 'antd';
import {DownloadOutlined,FolderOpenOutlined,PictureOutlined,UpOutlined,DownOutlined,CloudDownloadOutlined,InboxOutlined,ToolOutlined,UploadOutlined,ExclamationCircleOutlined,ClusterOutlined } from '@ant-design/icons';
import ImportProInfoStep from './component/ImportProInfoStep'
import './css/ImportProDetails.css'
import {withRouter} from 'react-router-dom'

const { Dragger } = Upload;
const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
        authorization: 'authorization-text',
    },
    onChange(info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
};
const uploadProps = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info) {
        const { status } = info.file;
        if (status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (status === 'done') {
            message.success(`${info.file.name} file uploaded successfully.`);
        } else if (status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
}
class ImportProDetails extends React.Component {
    attention(){

    }
    render() {
        let id = this.props.location.state
        return (
            <div>
                <Row style={{display:id!==4?'block':'none'}} className='myRow' id='stepRow'>
                    <Col span={24}>
                        <ImportProInfoStep/>
                    </Col>
                </Row>
                {/*//导入商品基本信息*/}
                <Row style={{display:id===1?'block':'none'}} className='myRow clear'>
                    <Col id='myModel' span={12}>
                        <div>
                            <DownloadOutlined/>
                            <span>下载模板</span>
                        </div>
                    </Col>
                    <Col id='myRightModel' span={12}>
                        <div>
                            <ToolOutlined />
                            <span>设置客户级别</span>
                        </div>
                    </Col>
                </Row>
                <Row style={{display:id===1?'block':'none'}} id='myFile'>
                    <Col>
                        <Upload {...props}>
                            <Button id='myUpload'>
                                请选择导入文件<UploadOutlined/>
                            </Button>
                        </Upload>
                        <div id='myDiv'>
                            <ExclamationCircleOutlined/>
                            <span style={{fontSize:'14px'}}>原有的商品导入模板拆为两份：商品基础信息模板、商品订货价模板。这里只导入商品基础信息。</span>
                            <p><ClusterOutlined/>点击这里自动拆分旧表格</p>
                        </div>
                    </Col>
                </Row>
                <Row style={{display:id===1?'block':'none'}}  className='myRow'>
                    <Col id='shangpinku' span={2}>
                        <CloudDownloadOutlined/>
                        <span>从商品库导入</span>
                    </Col>
                </Row>
                {/*//导入商品订货价*/}
                <Row style={{display:id===2?'block':'none'}} className='myRow'>
                    <Col>
                        <p>您可以通过以下两种方式导入：</p>
                        <p>1、在
                            <span className='myBtn'>商品列表</span>
                            导出商品订货价，修改后再导入。
                            2、
                            <span className='myBtn'><DownloadOutlined/>下载空模板</span>
                            ，填写商品对应价格信息后导入。
                        </p>
                    </Col>
                </Row>
                <Row style={{display:id===2?'block':'none'}} id='myFile'>
                    <Col>
                        <Upload {...props}>
                            <Button id='myUpload'>
                                请选择导入文件<UploadOutlined/>
                            </Button>
                        </Upload>
                    </Col>
                </Row>
                {/*/导入商品客户定价*/}
                <Row style={{display:id===3?'block':'none'}} className='myRow'>
                    <Col>
                        <p>您可以通过以下两种方式导入：</p>
                        <p>1、
                            <span className='myBtn'><DownloadOutlined/>导出已有客户订货价</span>
                            ，编辑价格后导入
                            2、
                            <span className='myBtn'><DownloadOutlined/>下载空模板</span>
                            ，填写客户对应价格信息后导入。
                        </p>
                    </Col>
                </Row>
                <Row style={{display:id===3?'block':'none'}} id='myFile'>
                    <Col>
                        <Upload {...props}>
                            <Button id='myUpload'>
                                请选择导入文件<UploadOutlined/>
                            </Button>
                        </Upload>
                    </Col>
                </Row>
                {/*//导入商品图片*/}
                <Row style={{display:id===4?'block':'none'}} className='myRow'>
                    <Col id='myload'>
                        <Dragger {...uploadProps}>
                            <p className="ant-upload-text">可点击或拖拽ZIP文件到此处上传文件</p>
                        </Dragger>
                    </Col>
                </Row>
                <Row style={{display:id===4?'block':'none'}} className='myRow'>
                    <Col>
                        <span style={{cursor:"pointer"}} onClick={this.attention}>如何创建图片压缩包?
                            <UpOutlined/>
                            <DownOutlined/>
                        </span>
                    </Col>
                </Row>
                <Row className='clear' style={{display:id===4?'block':'none'}} id='imgModel'>
                    <Col id='myImgModel'>
                        <p><PictureOutlined/><span className='imgName'>P123456.JPG图片名称是商品编码时即为首图</span></p>
                        <p><PictureOutlined/><span className='imgName'>tu2dsffd.JPG其他图片随机排序显示</span></p>
                        <p><PictureOutlined/><span className='imgName'>dfsd332.JPG</span></p>
                    </Col>
                    <Col id='hebingImg'><div></div></Col>
                    <Col id='wenjianjia'>
                        <p><FolderOpenOutlined/></p>
                        <p>P123456</p>
                        <p>文件夹以商品编码命名</p>
                    </Col>
                    <Col id='rightArrow'><div></div></Col>
                    <Col id='yasuo'>
                        <div></div>
                        <p>P123456</p>
                        <p>文件夹以商品编码命名</p>
                    </Col>
                </Row>
                <Row style={{display:id===4?'block':'none'}} className='myRow'>
                    <Col id='myText'>
                        <h4>注意事项:</h4>
                        <p>1、本次上传图片的商品，如商品已有图片，则已有图片将全部清除，以本次上传的图片为准</p>
                        <p>2、商品图片分主图（商品列表中显示、商品详情第一张图片）、图册（仅在商品详情中展示），主图文件名须以商品编码命名。</p>
                        <p>3、每个商品最多支持20张图片，图片格式仅支持JPG,JPEG,BMP,PNG格式。</p>
                        <p>4、每个商品以ZIP格式压缩文件上传图片，压缩文件以商品编码命名。例如商品编码为IRC-001，则对应图片压缩文件名应为：IRC-001.zip。</p>
                        <p>5、如上传图片未设置主图，系统将自动指定（后续可手工修改）。</p>
                        <p>6、单一商品图片如果超过20张，超过部分系统会自动清除。</p>
                        <p>7、单张图片不得大于20M，大于20M上传后，不会显示该图片。</p>
                        <p>8、支持一次性上传多个图片压缩文件，并且每个压缩文件大小不能超过200M。</p>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default withRouter(ImportProDetails)